﻿<!DOCTYPE html>
<html>
<!-- 培训需求矩阵管理 -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <!-- 行内编辑 css-->
    <style>
        .tb-edit .el-input {
            display: none
        }

        .tb-edit .current-row .el-input {
            display: block
        }

        .tb-edit .current-row .el-input+span {
            display: none
        }

        .tb-edit .el-select {
            display: none
        }

        .tb-edit .current-row .el-select {
            display: block
        }

        .tb-edit .current-row .el-select+span {
            display: none
        }

        .xian {
            display: block;
            text-align: center;
        }

        .yin {
            display: none;
            text-align: center;
        }

        .lineMust {
            position: absolute;
            right: 15px;
            bottom: 2px;
            bottom: 3px\0 !important;
            /* 兼容ie */
        }
    </style>
    <!-- 行内编辑 css-->
</head>

<body>
    <div id="app" class="popupW100" v-cloak>
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" size="mini">
            <el-row>
               
                <el-col :span="24">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item prop="post">
                                <el-input size="mini">
                                    <template slot="prepend">
                                        <div> {{TrainingDemandMatrixManagement.post+mark.m}}</div>
                                    </template>
                                    <el-select @visible-change="visibleChange" v-model="Form.post" slot="suffix"
                                        :placeholder="TrainingDemandMatrixManagement.post">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in post" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-input>
                                <span class="lineMust" v-if="!Form.post">
                                    <!-- 必填项添加 -->
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>
               

                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{TrainingDemandMatrixManagement.MatrixDescription+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.mark03"
                                    autocomplete="off">
                                </el-input>
                               
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>
            <el-row>
                <el-col class="head-tool">
                    <!--<el-button type="primary" @click="UserInput('tj')">{{col.btnAddCourse}}</el-button>-->
                    <btn :text="col.btnAdd" linetype="4" @click="add"></btn>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                  
                    <el-table ref="table" stripe @current-change="tableHandleCurrentChange" class="tb-edit"
                        :data="Form.courseList" :row-key="getRowKeys" border @selection-change="handleSelectionChange"
                        row-style="height:10px" style="width: 100%;">

                        <el-table-column prop="trainingcourse" show-overflow-tooltip="true"
                            :label="TrainingDemandMatrixManagement.course">
                            <template scope="scope">
                                <el-select @visible-change="visibleChange" @change="kcxz(scope.row)" v-model="scope.row.trainingcourse" placeholder="请选择" size="mini">
                                   
                                    <el-option v-for="item in trainingcourse" :label="item.coursewareName"
                                               :value="item.id"></el-option>
                                </el-select>
                                <span>{{scope.row.mark01}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="skillsRequirements"
                            :label="TrainingDemandMatrixManagement.SkillsRequirements" show-overflow-tooltip="true">
                            <template scope="scope">
                                <el-select @visible-change="visibleChange" @change="jnxz(scope.row)" v-model="scope.row.skillsRequirements" placeholder="请选择" size="mini">
                                    <el-option v-for="item in SkillsRequirements" :label="item.value"
                                               :value="item.key"></el-option>
                                </el-select>
                                <span>{{scope.row.mark02}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="lastComTime"
                            :label="TrainingDemandMatrixManagement.LastTrainingTime" show-overflow-tooltip="true">
                            <template scope="scope">
                                <el-input size="mini">
                                    <el-date-picker slot="suffix" v-model="scope.row.lastComTime" type="date"
                                        size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间">
                                    </el-date-picker>
                                </el-input>
                                <span>{{scope.row.lastComTime}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="trainTime"
                            :label="TrainingDemandMatrixManagement.TrainingFrequency" show-overflow-tooltip="true">
                            <template scope="scope">
                                <!--<el-input size="mini" v-model="scope.row.trainTime" placeholder="请输入内容">
                                </el-input>-->

                                <el-select @visible-change="visibleChange" v-model="scope.row.trainTime" placeholder="请选择" size="mini">
                                    <el-option :label="1" :value="1"></el-option>
                                    <el-option :label="2" :value="2"></el-option>
                                    <el-option :label="3" :value="3"></el-option>
                                    <el-option :label="4" :value="4"></el-option>
                                    <el-option :label="5" :value="5"></el-option>
                                   
                                </el-select>

                                <span>{{scope.row.trainTime}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column width="90" prop="update" label="编辑">
                            <template slot-scope="scope">
                                <span class="start xian">
                                    <button type="button" class="elst-bt-xg"
                                        @click=Edit('xg',scope.row.id,scope.$index,scope.row)>
                                        <i class="el-icon-edit"></i>
                                    </button>
                                </span>
                                <span class="end yin">
                                    <button type="button" class="elst-bt-xg " @click="Save(scope.$index, scope.row)">
                                        <i class="el-icon-circle-check-outline"></i>
                                        <!-- 保存 -->
                                    </button>
                                    <!--<button type="button" @click.native.prevent="deleteRow(scope.$index, Form.employmentLicenseList)">-->
                                    <button type="button" class="elst-bt-xg " @click="Back(scope.row)">
                                        <i class="el-icon-circle-close-outline"></i>
                                        <!-- 撤销 -->
                                    </button>
                                </span>
                            </template>
                        </el-table-column>

                        <el-table-column width="53" label="操作">
                            <template slot-scope="scope">
                                <button type="button" class="elst-bt-xg"
                                    @click="deleteRow(scope.$index, Form.courseList)">
                                    <i class="el-icon-delete"></i>
                                </button>
                            </template>
                        </el-table-column>


                    </el-table>



                    <!--表格结束-->

                </el-col>
            </el-row>
            <br>


            <el-row type="flex" justify="end">
                <el-form-item>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>-->
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>

        <el-dialog title="课程添加" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="50%" height="50%"
            top="10vh" fullscreen="true">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:100%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">

        var app = new Vue({

            el: '#app',
            data: {
                type:'tj',
                //父业传参
                id: '',
                imageUrl: '',
                checked: true,
                value1: '',
                radio: '1',
                ListItem: ListItem,
                trainingcourse: [],
                post: [],
                SkillsRequirements: [],
                QuestionManagementCourseList: [],

                formInline: {
                    model: {
                        nameofTrainingNeeds: '',
                        matrixDescription: '',
                        trainingcourse: '',
                        post: null,
                        skillsRequirements: '',
                    },
                    offset: 0,
                    limit: 10
                },
                //业务表单内容
                Form: {
                    id: guidEmpty,
                    NameofTrainingNeeds: '',
                    MatrixDescription: '',
                    trainingcourse: '',
                    post: null,
                    SkillsRequirements: '',
                    courseList: [],//选项
                },
                //表单验证
                rules: {
                    post: [
                        verification.NotNull,
                        //{ pattern: verification.StringLengthAtoB.t.format(2, 5), message: verification.StringLengthAtoB.m.format(2, 5), trigger: 'blur' }
                    ],
                    //MatrixDescription: [
                    //    verification.NotNull,
                    //    //{ pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 10), trigger: 'blur' }
                    //],
                }
            },

            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                kcxz: function (v) {
                    this.trainingcourse.forEach(function (item) {
                        if (item.id == v.trainingcourse) {
                            v.mark01 = item.coursewareName;
                            return;
                        }
                    });
                },
                jnxz: function (v) {
                    this.SkillsRequirements.forEach(function (item) {
                        if (item.key == v.skillsRequirements) {
                            v.mark02 = item.value;
                            return;
                        }
                    });
                },
                // 行内编辑 js
                add: function (formName) {
                    //if (this.formInline.model.classification == undefined) {
                    //    showMessage('必须选择评估类型!', 'error'); return;
                    //}
                    //alert('xxxxxxx');
                    if ($('tbody tr').attr("class") == "el-table__row current-row") {
                        showMessage(msg.EditingNotCompleted, 'error');
                    } else {
                        this.ListItem.type = 'tj';

                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');


                        var newObj = {
                            trainingcourse: null,//添加是清空录入数据的，每一项都要有
                            skillsRequirements: null,//添加是清空录入数据的，每一项都要有
                            lastComTime: null,//添加是清空录入数据的，每一项都要有
                            trainTime: null,//添加是清空录入数据的，每一项都要有
                        }
                        this.Form.courseList.unshift(newObj);
                        
                        setTimeout(function () {
                            $('.el-table__row:eq(0)').addClass('current-row');
                            $('.el-table__row:eq(0) span.end').removeClass('yin');
                            $('.el-table__row:eq(0) span.end').addClass('xian');
                            $('.el-table__row:eq(0) span.start').removeClass('xian');
                            $('.el-table__row:eq(0) span.start').addClass('yin');
                        }, 100);
                    }
                },
                //修改
                Edit: function (val, id, index,row) {

                    this.ListItem.type = 'xg';
                    $('.el-table__row').removeClass('current-row');
                    $('.el-table__row:eq(' + index + ')').addClass('current-row');
                    $('.el-table__row span.end').removeClass('xian');
                    $('.el-table__row span.end').addClass('yin');
                    $('.el-table__row span.start').removeClass('yin');
                    $('.el-table__row span.start').addClass('xian');
                    $('.el-table__row:eq(' + index + ') span.end').removeClass('yin');
                    $('.el-table__row:eq(' + index + ') span.end').addClass('xian');
                    $('.el-table__row:eq(' + index + ') span.start').removeClass('xian');
                    $('.el-table__row:eq(' + index + ') span.start').addClass('yin');

                     var a = {};
                     $.extend(a, row, true);
                     this.ListItem.modityShowRow = a;

                },
                // 保存 注意去掉mock中的parent 否则无法保存
                Save: function (a, b) {
                    if (!b.trainingcourse || !b.skillsRequirements || !b.lastComTime || !b.trainTime) {
                         showMessage(msg.NoMust, 'error');
                    }
                   
                    else {
                        var c = 0;
                        for (var i = 0; i < this.Form.courseList.length; i++) {
                            if (this.Form.courseList[i].trainingcourse == b.trainingcourse) {
                                c += 1;
                            }
                        }

                        if (c > 1) {
                            showMessage('请勿添加重复课程！', 'error');
                            return false;

                        }
                       

                        $('.el-table__row').removeClass('current-row');

                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');

                    }
                },
                Back: function (row) {
                 
                    $('.el-table__row').removeClass('current-row');
                    $('.el-table__row span.end').removeClass('xian');
                    $('.el-table__row span.end').addClass('yin');
                    $('.el-table__row span.start').removeClass('yin');
                    $('.el-table__row span.start').addClass('xian');
                    //初始化数据
                    // this.GetPageData(1);
                    //
                    //this.getData();


                    dianX(row);
                    

                },

                handblur: function () {

                },
                //table选中行handle
                tableHandleCurrentChange: function (currentRow) {
                    this.currSeelctId = currentRow.id;
                    this.currSeelctCell = currentRow;
                },
                // 行内编辑 js
                indexMethod: function (index) {
                    return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1;
                },



                //关闭Dialog 回调
                // closeDialog: function () { closeDialog(this); },

                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////


                //获取分页数据
                GetPageData: function (currentIndex) { GetPageData(this, currentIndex, '/api/TrainingDemandMatrixManagement/GetList') },
                //查询方法
                onSubmit: function () { onSubmit(this); },
                btnUpLoad: function () {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                },
                //提交数据
                onSubmitForm: function (formName) {
                    
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            if (mythis.Form.courseList.length <= 0) {
                                showMessage('请填写课程信息！', 'error');
                                return;
                            }
                            onSubmitForm(this, '/api/PX_Matrix/Save', mythis.Form);
                        } else {
                            //验证失败
                            showMessage(msg.NoMust, 'error');
                            return false;
                        }
                    });
                },
                getData: function () {
                    getData(this, '/api/PX_Matrix/get?id=' + this.id);
                },

                //删除方法
                onDelete: function () { onDelete(this, '/api/TrainingDemandMatrixManagement/DeleteMuti'); },
                //列表选择触发
                UserInputStatistics: function (val, id) { DialogShow(this, val, "TrainingDemandMatrixManagementInputPerson.html", id); },
                handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                handleSelect: function (ev) {
                    console.log(ev);
                },
                //获取分页数据
                GetPageData: function (currentIndex) { GetPageData(this, currentIndex, '/api/TrainingDemandMatrixManagement/GetList') },
                //pagesize改变 触发方法
                handleSizeChange: function (val) { handleSizeChange(this, val); },
                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },
                UserInput: function (val, id) { DialogShow(this, val, "TrainingDemandMatrixManagementInputAdd.html", id); },
                deleteRow: function (index, rows) {
                    rows.splice(index, 1);
                },
            },
            mounted: function () {
                //初始化数据
                //this.GetPageData(1);
                //列表高度自适应
                tablehigh(this);
                this.id = getUrlParam("id");
                if(this.id)
                    this.Form.id = this.id;
                this.getData();
                //获取下拉菜单内容
                
                var mythis = this;
                myAjax("post", this, '/api/PX_Course/GetListForDropDown', {
                    limit: 10,
                    model: { createFactory: parent.app.formInline.model.createFactory },offset: 0
                }, function (response) {
                    mythis.trainingcourse = response.data.pageData;
                }, false);

                myAjax("post", this, '/api/SysDuty/GetAllList', {
                    limit: 10,
                    model: { createFactory: parent.app.formInline.model.createFactory },offset: 0
                }, function (response) {
                    var ajaxModel = response.data;
                    mythis.post = ajaxModel;
                    
                }, false);

                this.SkillsRequirements = getDicData('技能要求');
                // this.QuestionManagementCourseList = getDicData('50', list); //

            }

        });
    </script>
</body>

</html>